<template>
  <div class="amap-page-container">
    <p>
      文档地址: <a href="https://elemefe.github.io/vue-amap/#/zh-cn/base/amap" target="_blank">https://elemefe.github.io/vue-amap/#/zh-cn/base/amap</a>
    </p>
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-marker
        vid="component-marker"
        :position="componentMarker.position"
        :content-render="componentMarker.contentRender"></el-amap-marker>
      <el-amap-marker
        :key="index"
        v-for="(marker, index) in markers"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :vid="index"></el-amap-marker>
    </el-amap>
    <div class="toolbar">
      <a-button name="button" @click="toggleVisible">toggle first marker</a-button>
      <a-button name="button" @click="changePosition">change position</a-button>
      <a-button name="button" @click="chnageDraggle">change draggle</a-button>
      <a-button name="button" @click="addMarker">add marker</a-button>
      <a-button name="button" @click="removeMarker">remove marker</a-button>
    </div>
  </div>
</template>

<script>
import VueAMap from 'vue-amap'

VueAMap.initAMapApiLoader({
  key: '59ec5ef06b273ce4796c72c130d7116c',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.4'
})

const exampleComponents = {
  props: ['text'],
  template: `<div>text from  parent: {{text}}</div>`
}
export default {
  name: 'AmapDemo02',
  components: { VueAMap },
  data () {
    return {
      count: 1,
      slotStyle: {
        padding: '2px 8px',
        background: '#eee',
        color: '#333',
        border: '1px solid #aaa'
      },
      zoom: 14,
      center: [121.5273285, 31.21515044],
      markers: [
        {
          position: [121.5273285, 31.21515044],
          events: {
            click: () => {
              alert('click marker')
            },
            dragend: (e) => {
              console.log('---event---: dragend')
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
            }
          },
          visible: true,
          draggable: false,
          template: '<span>1</span>'
        }
      ],
      renderMarker: {
        position: [121.5273285, 31.21715058],
        contentRender: (h, instance) => {
          // if use jsx you can write in this
          // return <div style={{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'}} onClick={() => ...}>marker inner text</div>
          return h(
            'div',
            {
              style: { background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00' },
              on: {
                click: () => {
                  const position = this.renderMarker.position
                  this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002]
                }
              }
            },
            ['marker inner text']
          )
        }
      },
      componentMarker: {
        position: [121.5273285, 31.21315058],
        contentRender: (h, instance) => h(exampleComponents, {
          style: { backgroundColor: '#fff' },
          props: { text: 'father is here' }
        }, ['xxxxxxx'])
      },
      slotMarker: {
        position: [121.5073285, 31.21715058]
      }
    }
  },
  methods: {
    onClick () {
      this.count += 1
    },
    changePosition () {
      const position = this.markers[0].position
      this.markers[0].position = [position[0] + 0.002, position[1] - 0.002]
    },
    chnageDraggle () {
      const draggable = this.markers[0].draggable
      this.markers[0].draggable = !draggable
    },
    toggleVisible () {
      const visableVar = this.markers[0].visible
      this.markers[0].visible = !visableVar
    },
    addMarker () {
      const marker = {
        position: [121.5273285 + (Math.random() - 0.5) * 0.02, 31.21515044 + (Math.random() - 0.5) * 0.02]
      }
      this.markers.push(marker)
    },
    removeMarker () {
      if (!this.markers.length) return
      this.markers.splice(this.markers.length - 1, 1)
    }
  }
}
</script>

<style scoped>
  .amap-demo {
    height: 500px;
  }
</style>
